<template>
  <div class="user-activity">
    <div class="post">
      <div class="user-block">
        <img class="img-circle" :src="'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png' + avatarPrefix" />
        <span class="username text-muted">王世浩</span>
        <span class="description">Shared publicly - 7:30 PM today</span>
      </div>
      <p>
        Lorem ipsum represents a long-held tradition for designers, typographers and the like. Some people hate it and argue for its demise,
        but others ignore the hate as they create awesome tools to help create filler text for everyone from bacon lovers to Charlie Sheen
        fans.
      </p>
    </div>
    <div class="post">
      <div class="user-block">
        <img class="img-circle" :src="'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png' + avatarPrefix" />
        <span class="username text-muted">姚依园</span>
        <span class="description">Sent you a message - yesterday</span>
      </div>
      <p>
        Lorem ipsum represents a long-held tradition for designers, typographers and the like. Some people hate it and argue for its demise,
        but others ignore the hate as they create awesome tools to help create filler text for everyone from bacon lovers to Charlie Sheen
        fans.
      </p>
    </div>
    <div class="post">
      <div class="user-block">
        <img class="img-circle" :src="'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png' + avatarPrefix" />
        <span class="username text-muted">徐如彬</span>
        <span class="description">Sent you a message - yesterday</span>
      </div>
      <p>
        Lorem ipsum represents a long-held tradition for designers, typographers and the like. Some people hate it and argue for its demise,
        but others ignore the hate as they create awesome tools to help create filler text for everyone from bacon lovers to Charlie Sheen
        fans.
      </p>
    </div>
  </div>
</template>

<script>
  const avatarPrefix = '?imageView2/1/w/80/h/80'

  export default {
    data() {
      return {
        avatarPrefix,
      }
    },
  }
</script>

<style lang="scss" scoped>
  .user-activity {
    .user-block {
      .username,
      .description {
        display: block;
        margin-left: 50px;
        padding: 2px 0;
      }

      .username {
        font-size: 16px;
        color: #000;
      }

      :after {
        clear: both;
      }

      .img-circle {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        float: left;
      }

      span {
        font-weight: 500;
        font-size: 12px;
      }
    }

    .post {
      font-size: 14px;
      border-bottom: 1px solid #d2d6de;
      margin-bottom: 15px;
      padding-bottom: 15px;
      color: #666;

      .image {
        width: 100%;
        height: 100%;
      }

      .user-images {
        padding-top: 20px;
      }
    }

    .list-inline {
      padding-left: 0;
      margin-left: -5px;
      list-style: none;

      li {
        display: inline-block;
        padding-right: 5px;
        padding-left: 5px;
        font-size: 13px;
      }

      .link-black {
        &:hover,
        &:focus {
          color: #999;
        }
      }
    }
  }

  .box-center {
    margin: 0 auto;
    display: table;
  }

  .text-muted {
    color: #777;
  }
</style>
